<template>
  <uni-nav-bar title="合伙人详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <!-- <view class="package column" style="padding:40rpx 0px;" v-if="infor">
    <view>累计收入</view>
    <view style="font-size: 48rpx; margin-top:20rpx;">{{infor.count}}</view>
  </view> -->
  <view class="package" v-if="infor">
    <view>累计收益</view>
    <view style="font-size: 48rpx;margin:10rpx 0px;"><text style="font-size: 28rpx;">￥</text>{{infor.count}}</view>
    <view style="font-size: 24rpx;">本期收益：￥{{infor.month}}</view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package space-between" v-for="(item,index) in attendanList" :key="item.id"
      :style="{marginTop:index===0?'0px':'10rpx'}"
      @click="navTo('administrator/partner/carOrder?cart_code='+item.cart_code+'&cart_id='+item.id+'&id='+staff_id)">
      <view class="center">
        <image :src="item.image" mode=""></image>
        <view class="direction-start">
          <text>{{item.cart_code}}</text>
          <text style="font-size:26rpx;color:#666;margin-top:10rpx;">入驻时间：{{item.createtime}}</text>
        </view>
      </view>
      <view>{{item.money}}</view>
    </view>
  </scroll-view>
  <view class="add" @click="open()">添加车辆</view>
  <!-- 车牌弹框 -->
  <VehiclePlatePad v-if="isShowPlatePad" @cancel="isShowPlatePad = false" @confirm="confirmPlate" />
  <uni-popup ref="popup" type="center">
    <view class="popups">
      <view class="botton">车牌号</view>
      <view class="space-between card">
        <view v-for="(item) in car" :style="{display:car?'block':'none'}" @click="openPlatePicker()">{{item}}</view>
        <view v-for="(item) in 7" :style="{display:car?'none':'block'}" @click="openPlatePicker()"></view>
      </view>
      <view class="botton">图片</view>
      <mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" :maxCount="1" />
      <view class="add" style="width:300rpx;" @click="addCar()">确认</view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import VehiclePlatePad from '@c/common/VehiclePlatePadn.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import mkUpload from "@c/mk-upload/mk-upload.vue"
  import { toPublish } from '@mqtt';
  import { getPatnerMoney, getPatnerCart } from '@/gql/administrator';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  const isShowPlatePad = ref(false); //添加车牌弹框
  const numberplate = ref(''); //车牌号
  const car = ref()
  const popup = ref(null)
  const staff_id = ref()

  const attendanList = ref([])
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref()
  const infor = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 245;
    },
  });
  // 上传图片
  const imgList = ref([])
  onLoad((pearm) => {
    staff_id.value = Number(pearm.id)
    init()
    partnerData()
  })
  // 上传图片
  function onChoose(e : any) {
    uni.uploadFile({
      url: 'https://admin.anlan.tech/api/common/upload2',
      filePath: e.tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'  // 上传附带参数
      },
      success: (uploadFileRes) => {
        // 根据接口具体返回格式   赋值具体对应url
        imgList.value.push(JSON.parse(uploadFileRes.data).data.fullurl)
      },
      fail: (err : any) => {
        console.log('err', err)
      }
    });
  }
  // 删除图片
  function onDelete() {
    imgList.value = []
  }

  function partnerData() {
    showLoading()
    const payload = {
      query: getPatnerMoney,
      variables: {
        staff_id: staff_id.value,
      },
    };
    toPublish(
      'ql/control/getPatnerMoney',
      payload,
      (obj : any) => {
        const { getPatnerMoney } = obj.data;
        infor.value = getPatnerMoney
      }
    );
  }
  function init() {
    showLoading()
    const payload = {
      query: getPatnerCart,
      variables: {
        page: currentPage.value,
        staff_id: staff_id.value,
      },
    };
    toPublish(
      'ql/control/getPatnerCart',
      payload,
      (obj : any) => {
        const { getPatnerCart } = obj.data;
        attendanList.value = [...attendanList.value, ...getPatnerCart.list];
        lastPage.value = getPatnerCart.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }

  /**
   * 打开/关闭车牌弹框
   */
  function openPlatePicker() {
    isShowPlatePad.value = true
  }
  function confirmPlate(plate : string) {
    console.log(plate)
    numberplate.value = plate;
    car.value = plate.split('')
    isShowPlatePad.value = false;
  }
  function addCar() {
    if (!numberplate.value) {
      errorToast('请输入车牌')
      return
    }
    if (imgList.value.length < 1) {
      errorToast('请上传车辆图片')
      return
    }
    showLoading()
    const payload = {
      patner_id: staff_id.value,
      cart_code: numberplate.value,
      image: imgList.value.join()
    };
    toPublish(
      'control/addPatnerCart',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        close()
        if (code === 1) {
          successToast(msg)
          setTimeout(() => {
            currentPage.value = 1
            attendanList.value = []
            init()
          }, 600)
        } else {
          errorToast(msg)
        }
      }
    );
  }

  function open() {
    numberplate.value = ''
    car.value = ''
    imgList.value = []
    popup.value.open()
  }
  function close() {
    popup.value.close()
  }
</script>

<style scoped lang="less">
  .center {
    image {
      width: 82rpx;
      height: 82rpx;
      background: #ECF0F6;
      border-radius: 8rpx;
      margin-right: 15rpx;
    }
  }

  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 20rpx auto;
    font-size: 32rpx;
  }

  .popups {
    width: 700rpx;
    background-color: white;
    border-radius: 5px;
    padding: 20rpx;
    box-sizing: border-box;

    .card {
      margin-bottom: 20rpx;

      view {
        width: 75rpx;
        height: 90rpx;
        background: #EFF4F8;
        border-radius: 10rpx;
        text-align: center;
        line-height: 90rpx;
      }
    }

    .botton {
      margin-bottom: 20rpx;
    }
  }
</style>
<style>
  .popups>>>.mk-upload_add {
    background: #EFF4F8 !important;
  }
</style>